<template>
    <div>
        <div class="title">
            <div>
                <el-button type="primary" plain>新增</el-button>
                <el-button type="success" plain>修改</el-button>
                <el-button type="danger" plain>删除</el-button>
                <el-button type="warning" plain>导出</el-button>
            </div>
            <div class="look">
                <div>
                    <el-tooltip class="box-item" effect="dark" :content="flag == true ? '隐藏搜索' : '显示搜索'"
                        placement="top">
                        <el-icon @click="hidden">
                            <Search />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div>
                    <el-tooltip class="box-item" effect="dark" content="刷新" placement="top">
                        <el-icon @click="reload">
                            <Refresh />
                        </el-icon>
                    </el-tooltip>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 搜索部分隐藏与显示
const flag = ref(true)
const hidden = () => {
    flag.value = !flag.value
}
// 页面刷新
const reload = () => {
    window.location.reload();
}
</script>

<style lang="scss" scoped>
.title {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    /* background-color: aqua; */
}

.look {
    display: flex;
}

.look>div {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(206, 210, 209);
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
}

.title button {
    margin-right: 5px;
}
</style>